<template>
  <el-select
    :modelValue="modelValue"
    @update:modelValue="emit('update:modelValue', $event)"
    filterable
    :loading="loading"
    placeholder="请选择规格值"
  >
    <el-option
      v-for="specValue in specValueList"
      :key="specValue.id"
      :label="specValue.name"
      :value="specValue.id"
    ></el-option>
  </el-select>
</template>

<script setup>
// 1. 导入依赖
import { ref } from "vue";
import { getSpecValueAPI } from "@/apis/goods.js";

// 2. 定义Props和Emits
const props = defineProps({
  modelValue: {
    type: [Number, String],
  },
});

const emit = defineEmits(["update:modelValue"]);

// 3. 定义响应式数据
const specValueList = ref([]);
const loading = ref(false);

// 4. 定义并立即调用方法以初始化数据
const getSpecValue = async () => {
  loading.value = true;
  const res = await getSpecValueAPI();
  specValueList.value = res.data;
  loading.value = false;
};

getSpecValue(); // 立即调用以获取数据
</script>